import { message, Upload, UploadProps } from "antd";
import { PropsWithChildren } from "react";
import { SiderBar } from "../components/SiderBar";
import styles from "./index.module.css";
import { fetchUploadFile } from "@/api/server/recommend_question";
import { useTextReadStore } from "@/store";

interface ITextReadProps {
  className?: string;
}
export function TextRead(props: PropsWithChildren<ITextReadProps>) {
  const collapse = useTextReadStore((state) => state.collapse);
  const list = useTextReadStore((state) => state.list);
  const activeKey = useTextReadStore((state) => state.activeKey);
  const setActiveKey = useTextReadStore((state) => state.setActiveKey);
  const setCollapse = useTextReadStore((state) => state.setCollapse);
  const refreshList = useTextReadStore((state) => state.refreshList);
  const listType = useTextReadStore((state) => state.listType);
  const listSearch = useTextReadStore((state) => state.listSearch);
  const setListType = useTextReadStore((state) => state.setListType);
  const setListSearch = useTextReadStore((state) => state.setListSearch);
  const uploadProps: UploadProps = {
    name: "file",
    multiple: true,
    className: "textReadUpload",
    // action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    customRequest(options: any) {
      const form = new FormData();
      form.append("file_type", options.file?.type);
      form.append("file", options.file);
      fetchUploadFile(form, (a, b) => {
        console.log("upload progress", a, b);
        options.onProgress({
          percent: (a.loaded / a.total) * 100,
        });
      })
        .then((res) => {
          options.onSuccess(res);
        })
        .catch((err) => {
          options.onError(err);
        });
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };
  return (
    <div className="flex flex-row h-full">
      <SiderBar
        type="text-read"
        list={list}
        setListSearch={setListSearch}
        setListType={setListType}
        listSearch={listSearch}
        listType={listType}
        collapse={collapse}
        refreshList={refreshList}
        onSetActiveKey={setActiveKey}
        onSetCollapse={setCollapse}
        activeKey={activeKey}
      />
      <div className="flex-1 min-w-0 PageContent flex flex-col items-center">
        <div className="w-[84%] h-full">
          <div className="px-[76px] pt-[54px] flex flex-col items-center h-full">
            <img src="/images/logo-mini.png" className="w-[36px]" />
            <div className={[styles.title].join(" ")}>
              法律文本，一键上传阅读
            </div>
            <div className={styles.desc}>
              我可以辅助您阅读起诉状、答辩状、笔录等法律文本
            </div>

            <div className="w-full mt-[35px] flex flex-row justify-center">
              <Upload.Dragger {...uploadProps}>
                <p className="flex flex-row justify-center">
                  <img src="/images/upload.png" className="w-[122px]" />
                </p>
                <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
                <p className="ant-upload-hint">
                  请上传不超过100MB / 1000页的 pdf / doc / docx
                  <br />
                  或不超过20MB的jpg / jpeg / png / bmp
                </p>
              </Upload.Dragger>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
